import 'package:extended_image/extended_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_application_1/components/continue_scroll/continue_scroll.dart';
import 'package:flutter_application_1/plugins/extended_image.dart';

// 单个商品
class CategoryListItem extends StatelessWidget {
  final String? cover;
  final String? title;
  final Function? onTap;

  final double size = 100;

  CategoryListItem({
    this.cover,
    this.title,
    this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        if (onTap != null) {
          onTap!();
        }
      },
      child: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ExtendedImage.network(
              cover ?? '',
              width: size,
              height: size,
              fit: BoxFit.cover,
              loadStateChanged: commonLoadStateChanged,
            ),
            SizedBox(
              width: size,
              child: Text(
                title ?? '',
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(
                  fontSize: 13,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class CategoryList extends StatefulWidget {
  final PageController pageController;
  final List<CategoryListItem> list;
  final Function? onTapMore;

  CategoryList({
    required this.pageController,
    this.list = const [],
    this.onTapMore,
  });

  @override
  _CategoryListState createState() => _CategoryListState();
}

class _CategoryListState extends State<CategoryList> {
  final double space = 10;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(
        left: 10,
        right: 10,
        bottom: 10,
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(8),
        child: Column(
          children: [
            // 顶部图片
            Stack(
              children: [
                ExtendedImage.network(
                  'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091306%2Fjk5a104wt5mjk5a104wt5m.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628733692&t=816fcbe0a6297b95acbdea05ef37bf7c',
                  width: double.infinity,
                  height: 100,
                  fit: BoxFit.cover,
                  loadStateChanged: commonLoadStateChanged,
                ),
                Container(
                  padding: EdgeInsets.all(10),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      // 分类标题
                      Container(
                        padding:
                            EdgeInsets.symmetric(vertical: 3, horizontal: 10),
                        decoration: BoxDecoration(
                          color: Color.fromRGBO(255, 255, 255, 0.3),
                          borderRadius: BorderRadius.circular(20),
                        ),
                        child: Text(
                          '盲盒手办',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 14,
                          ),
                        ),
                      ),
                      GestureDetector(
                        onTap: () {
                          if (widget.onTapMore != null) {
                            widget.onTapMore!();
                          }
                        },
                        child: Row(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Text(
                              '发现更多',
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 14,
                              ),
                            ),
                            Icon(
                              Icons.keyboard_arrow_right,
                              color: Colors.white,
                              size: 20,
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
            // 底部列表
            Container(
              // 高度
              height: 160,
              padding: EdgeInsets.symmetric(vertical: 10),
              color: Colors.white,
              child: ContinueScroll(
                pageController: widget.pageController,
                child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  physics: ClampingScrollPhysics(),
                  itemBuilder: (BuildContext context, int index) {
                    // 单个商品
                    return Container(
                      margin: EdgeInsets.only(
                        left: index == 0 ? space : space / 2,
                        right:
                            index == widget.list.length - 1 ? space : space / 2,
                      ),
                      child: widget.list[index],
                    );
                  },
                  itemCount: widget.list.length,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
